/**
 * Created by 69466 on 2018/9/13.
 */
import React, {Component} from 'react';
import {StyleSheet, Text, TouchableWithoutFeedback, } from 'react-native';
import {commonStyles} from "../../configs/commonStyle";
import {Dialog, View} from "react-native-ui-lib";
import {openSettings} from 'react-native-permissions';
import {isIPhoneX} from "../../configs/platform";

export default class PermissionDialog extends Component {

    constructor(props) {
        super(props);
        this.state = {
            title: '',
            content: '',
            isOpen:false,
        }
    }

    show = (content, title = '应用所需权限') => {
        this.setState({isOpen: true, title, content})
    }

    dismiss = () => {
        this.setState({isOpen: false})
        const {onDismissCallback} = this.props
        onDismissCallback && onDismissCallback()
    }

    renderPannableHeader = props => {
        const {title} = props;
        return (
            <View>
                <View padding-10 center>
                    <Text style={{...commonStyles.text_black_16}}>{title}</Text>
                </View>
                <View height={1} style={{backgroundColor: '#eeeeee'}}/>
            </View>
        );
    };

    /**
     * 1.设置modal内容居中，背景透明
     * 2.设置内容视图背景色，圆角
     * @returns {*}
     */
    render() {
        const {title, content,isOpen} = this.state;
        const {customContent} = this.props
        return (
            <Dialog
                migrate
                useSafeArea
                containerStyle={styles.roundedDialog}
                visible={isOpen}
                onDismiss={this.dismiss}
                renderPannableHeader={this.renderPannableHeader}
                pannableHeaderProps={{title}}
            >
                <View style={styles.dialog}>
                    {customContent ? customContent : <Text style={styles.content}>{content}</Text>}
                </View>
                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                    <TouchableWithoutFeedback onPress={() => this.dismiss()}>
                        <View style={styles.btnCancel}>
                            <Text style={commonStyles.text_black_17}>{'暂不'}</Text>
                        </View>
                    </TouchableWithoutFeedback>
                    <TouchableWithoutFeedback onPress={() => openSettings()}>
                        <View style={styles.btnOk}>
                            <Text style={commonStyles.text_orange_17}>{'立即设置'}</Text>
                        </View>
                    </TouchableWithoutFeedback>
                </View>

            </Dialog>
        );
    }
}


const styles = StyleSheet.create({
    roundedDialog: {
        backgroundColor: 'white',
        marginBottom: isIPhoneX ? 0 : 20,
        borderRadius: 6
    },
    container: {width: 245, borderRadius: 8, alignSelf: 'center', backgroundColor: 'white'},
    content: {
        fontSize: 14,
        color: '#999999',
        marginTop: 10,
        lineHeight: 25
    },
    dialog: {
        borderBottomWidth: 1,
        borderBottomColor: '#eeeeee',
        alignItems: 'center',
        justifyContent: 'center',
        paddingHorizontal: 13,
        paddingBottom: 19,
        paddingTop: 10,
    },

    btnCancel: {
        flex: 1,
        borderRightWidth: 1,
        borderRightColor: '#eeeeee',
        justifyContent: 'center',
        alignItems: 'center',
        height: 50,
    },
    btnOk: {flex: 1, justifyContent: 'center', alignItems: 'center', height: 50},
});


